<template lang="pug">
.survey-content-container
  .survey-content-header
    .survey-content-title 相关证书资料
  el-form(:model="form" :rules="certificateRules" ref="certificateRules" label-width="150px" class="form-section-module" size="small")
    .survey-form
      .survey-form-title
        span 证书资料
        label
      .form-section
        el-form-item(prop="businessLicenseFileIds")
          .custom-item-label(slot="label")
            .custom-item-label-value 营业执照：
            .custom-item-label_info 仅允许上传1张图片
          .el-form-images
            .el-form-images-upload
              ali-upload(@getProgress="getProgress($event, 'businessFileList')" @getFileInfo="getFileInfo($event, 'businessLicenseFileIds')" accept="image/*" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'businessFileList')")
                .el-form-upload_btn
                  .iconfont.el-icon-plus
                  .el-form-upload_btn-text 上传图片
              .upload-image(v-for="item, index in form.businessFileList" :key="index")
                img.upload-image-body(:src="item.fileSrc")
                .upload-image-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                .upload-image-progress(v-if="item.isSuccess == 2" @click="again(item)") 重新上传
                .upload-image-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'businessFileList', 'businessLicenseFileIds')")
                  .iconfont.el-icon-circle-close
        el-form-item(prop="proxyCertificateFileIds")
          .custom-item-label(slot="label")
            .custom-item-label-value 代理商（贸易商）需提供代理证书：
            .custom-item-label_info 可上传多张图片
          .el-form-images
            .el-form-images-upload
              ali-upload(@getProgress="getProgress($event, 'proxyFileList')" @getFileInfo="getFileInfo($event, 'proxyCertificateFileIds')" multiple accept="image/*" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'proxyFileList')")
                .el-form-upload_btn
                  .iconfont.el-icon-plus
                  .el-form-upload_btn-text 上传图片
              .upload-image(v-for="item, index in form.proxyFileList" :key="index")
                img.upload-image-body(:src="item.fileSrc")
                .upload-image-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                .upload-image-progress(v-if="item.isSuccess == 2" @click="again(item)") 重新上传
                .upload-image-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'proxyFileList', 'proxyCertificateFileIds')")
                  .iconfont.el-icon-circle-close
        el-form-item(label="请上传公司简介：" prop="companyFileIds")
          .el-form-body
            .el-form-upload
              ali-upload(@getProgress="getProgress($event, 'companyFileList')" @getFileInfo="getFileInfo($event, 'companyFileIds')" multiple accept=".doc,.docx,.pdf" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'companyFileList')")
                el-button(name="survey") 选择附件
            .upload-info 支持格式： .doc .docx .pdf
            .file-item(v-for="item in form.companyFileList" :class="{ 'active': item.progress == 100 }")
              .file-item-name
                .file-item-progress_line(:style="{ 'width': `${item.progress}%` }" v-if="item.progress < 100")
                .iconfont.el-icon-document
                span {{item.fileName}}
              .file-item-handles
                .file-item-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                i.iconfont.el-icon-refresh-right(v-if="item.isSuccess == 2" @click="again(item)")
                i.iconfont.el-icon-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'companyFileList', 'companyFileIds')")
  .survey-section-footer
    el-button(name="survey" plain @click="prevStep") 上一步，选择相关体系
    el-button(name="survey" @click="submit") 提交入库申请
</template>

<script>
import aliUpload from "@/components/customUpload"
export default {
  name: 'certificateModule',
  props: {
    dropDwon: Object,
    parentForm: Object
  },
  components: {
    aliUpload
  },
  data () {
    var validateFileList = (rule, value, callback) => {
      if (!this.form[rule.key].length) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }
    return {
      fileAgain: null,
      form: {
        businessFileList: [],
        proxyFileList: [],
        companyFileList: [],
        businessLicenseFileIds: [], // 营业执照
        proxyCertificateFileIds: [], // 代理商（贸易商）需提供代理证书
        companyFileIds: [] // 公司简介
      },
      certificateRules: {
        businessLicenseFileIds: [
          { validator: validateFileList, message: '请上传相关证书资料！', key: 'businessLicenseFileIds', trigger: 'blur' }
        ],
        proxyCertificateFileIds: [
          { validator: validateFileList, message: '请上传相关证书资料！', key: 'proxyCertificateFileIds', trigger: 'blur' }
        ],
        companyFileIds: [
          { required: true, validator: validateFileList, message: '请上传相关证书资料！', key: 'companyFileIds', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    prevStep () {
      this.$emit('change', { form: this.form, nextRouter: 'safe' })
    },
    getProgress (file, key) {
      this.setTempFileList(file, key)
    },
    getFileInfo (data, key) {
      if (key === 'businessLicenseFileIds') {
        this.form[key] = [...data]
      } else {
        this.form[key].push(...data)
      }
    },
    setTempFileList (fileList, key) {
      fileList.forEach(item => {
        let index = this.form[key].findIndex(row => row.uid === item.uid)
        if (index > -1) {
          this.form[key][index] = item
        } else {
          if (key === 'businessFileList') this.form[key] = [item]
          else this.form[key].push(item)
        }
      })
    },
    setItemFile (item, key) {
      let index = this.form[key].findIndex(row => row.uid === item.uid)
        if (index > -1) {
          this.$set(this.form[key], index, item)
        } else {
          if (key === 'businessFileList') this.form[key] = [item]
          else this.form[key].push(item)
        }
    },
    again (item) {
      this.fileAgain = { ...item, isSuccess: 1 }
    },
    deleteFile (item, tempKey, formKey) {
      let tempIndex = this.form[tempKey].findIndex(row => row.uid === item.uid)
      let formIndex = this.form[formKey].findIndex(row => row.uid === item.uid)
      if (tempIndex > -1) {
        this.form[tempKey].splice(tempIndex, 1)
      }
      if (formIndex > -1) {
        this.form[formKey].splice(formIndex, 1)
      }
    },
    getAgainProgress (item, key) {
      this.fileAgain = null
      this.setItemFile(item, key)
    },
    submit () {
      this.$refs.certificateRules.validate((valid) => {
        if (!valid) {
          this.$message.error('请仔细核对资料填写是否正确！')
          return
        }
        this.$emit('change', { form: this.form, nextRouter: 'submit' })
      })
    }
  },
  created () {
    this.form = { ...this.form, ...this.parentForm }
  }
}
</script>

<style lang="scss" scoped>
.survey-content-container {
  width: 100%;
  background: #fff;
  padding: 25px 22px;
}
.survey-content-header {
  display: flex;
  .survey-content-title {
    padding: 10px 16.5px;
    border-radius: 0 50px 50px 0;
    background: #d7000f;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
  }
}
.survey-form {
  margin-top: 5px;
  .survey-form-title {
    display: flex;
    align-items: center;
    padding: 16px 0;
    span {
      display: inline-block;
      font-size: 16px;
      line-height: 26px;
      padding-right: 10px;
    }
    label {
      height: 1px;
      flex: 1;
      background: #EDEDED;
    }
  }
}
.form-section {
  background: #F6F6F9;
  border-radius: 6px;
  padding: 25px 20px;
  &.form-small-section {
    margin-bottom: 16px;
  }
}
.form-item-small {
  width: 275px;
}
.form-item-input_ft {
  padding: 0 10px;
  color: #000;
  line-height: 32px;
}
.survey-section-footer {
  margin-top: 22px;
  padding: 10px 0;
  text-align: center;
}
.el-form-images-upload {
  display: flex;
  flex-wrap: wrap;
}
.upload-image {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, .2);
  border-radius: 4px;
  position: relative;
  .upload-image-body {
    max-width: 100%;
    max-height: 100%;
  }
  .upload-image-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }
  .upload-image-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    line-height: 1;
    cursor: pointer;
    .iconfont {
      font-size: 20px;
      color: #FF708B;
    }
  }
}
.el-form-upload_btn {
  width: 100px;
  height: 100px;
  background: #fff;
  border: 1px dashed #DCDFE6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
  .iconfont {
    font-size: 16px;
    color: #B2B4C7;
  }
  .el-form-upload_btn-text {
    margin-left: 3px;
    font-size: 12px;
    color: #B2B4C7;
  }
}
.survey-section-footer {
  margin-top: 22px;
  padding: 10px 0;
  text-align: center;
}
.custom-item-label {
  display: inline-block;
}
.custom-item-label-value {
  line-height: 22px;
  &:before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
  }
}
.custom-item-label_info {
  font-size: 14px;
  line-height: 22px;
  color: #999;
  white-space: nowrap;
}
.el-form-body {
  padding: 15px;
  background: #fff;
  border-radius: 4px;
}
.file-item {
  display: flex;
  align-items: center;
  padding: 8px 4px;
  border-radius: 4px;
  border: 1px solid #fff;
  &.active {
    &:hover {
      background: #FEF0F0;
      border: 1px solid #FDE2E2;
    }
  }
  .file-item-name {
    position: relative;
    flex: 2;
    span {
      display: inline-block;
      margin-left: 10px;
    }
    .file-item-progress_line {
      position: absolute;
      width: 100%;
      height: 2px;
      background: #409EFF;
      bottom: 0;
      left: 0;
      border-radius: 0 0 20px 20px;
    }
  }
}
.upload-info {
  margin-top: 8px;
  font-size: 12px;
  line-height: 18px;
  color: #909399;
}
.file-item-progress {
  display: flex;
  justify-content: flex-end;
  width: 150px;
}
.file-item-handles {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .iconfont {
    margin-left: 10px;
    font-size: 20px;
  }
}
</style>